<template>
	<div ref="gaugeBox" style="width: 100%; height: 100%"></div>
</template>

<script setup>
	import * as echarts from "echarts";
	import {
		ref,
		onMounted,
		watch
	} from "vue";

	const gaugeBox = ref(null);
	const option = ref(null);
	let myChart = null;

	const myProps = defineProps({
		//颜色
		gaugecolor: {
			type: String,
			required: true,
		},
		//数据
		gaugedata: {
			type: Array,
			required: true,
		},
	});

	//监听数据的变化
	watch(
		() => option.value,
		(newvalue, oldvalue) => {
			myChart.setOption(option.value);
		}, {
			deep: true,
		}
	);

	onMounted(() => {
		myChart = echarts.init(gaugeBox.value, 'dark', {
			renderer: 'canvas',
			useDirtyRect: false
		});
		var app = {};

		option.value = {
			backgroundColor:"#001432",
			series: [{
				type: 'gauge',
				itemStyle: {
					color:myProps.gaugecolor
				},
				progress: {
					show: true,
					width: 8 //进度圆环的宽度
				},
				axisLine: {
					lineStyle: {
						width: 8 //总圆环的宽度
					}
				},
				axisTick: {
					show: false
				},
				// splitLine:刻度拆分线样式
				splitLine: {
					length: 0,
					lineStyle: {
						width: 0,
						color: '#999'
					}
				},
				// axisLabel:刻度文字样式
				axisLabel: {
					distance: 2,//刻度距外边距
					color: '#FFF',
					fontSize: 9 //刻度文字大小
				},
				// anchor:仪表盘按钮
				anchor: {
					show: true,
					showAbove: true,
					size: 10,
					itemStyle: {
						borderWidth: 10
					}
				},
				title: {
					show: false
				},
				detail: {
					valueAnimation: true,
					fontSize: 18,
					offsetCenter: [0, '90%'],
					color:myProps.gaugecolor
				},
				data: myProps.gaugedata
			}]
		};
		
		if (option.value && typeof option.value === 'object') {
			myChart.setOption(option.value);
		}
		
		window.addEventListener('resize', myChart.resize);
	});
</script>

<style>
</style>
